<template>
  <div class="head-bar">
    <!-- 页面顶部 -->
    <el-row>
		<!-- 左端 -->
        <el-col :span="6">
            <!-- <div class="grid-content bg-purple">
            <div class="bar-left"><img src="../assets/img/china_ele.jpeg" alt="" height="70px"></img></div>
            </div> -->
        </el-col>
		<!-- 中间 -->
        <el-col :span="12"><div class="grid-content bg-purple-light">
		<!-- <p>国家电网有序用电平台</p> -->
		</div></el-col>
		<!-- 右端 -->
        <el-col :span="6"><div class="grid-content bg-purple">
            <!-- 图标 -->
            <div class="right1">
                <!-- <img src="../assets/img/protrait.jpeg" style="height:70px" alt=""> -->
            </div>
            <!-- 昵称 -->
            <div class="right2">
                <!-- <p class="protrait">{{protrait}}</p> -->
                <!-- <span>{{protrait}}</span> -->
                <span>昵称</span>
            </div>
            <!-- 占位 -->
            <div class="right2">
                <span>占位</span>
            </div>
            <!-- 占位 -->
            <div class="right2">
                <span>占位</span>
            </div>
        </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: "HeadBar",
    props: {
        userData: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            protrait: "admin"
        }
    },
}
</script>

<style scoped lang="scss">
.head-bar {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: rgb(3, 88, 80);
    background-color: rgb(255, 255, 255)
}
.bar-left {
    /* margin-left: 130px; */
	background-color: antiquewhite;
	img{
		// margin-left: 100px;
		display: block;
		// margin-left: auto;
		// margin-right: auto;
		float: right;
		// padding: 1px 0px;
		text-align: center;
		//line-height: 1.5;
	}
}
.bg-purple-light {
	height: 100%;
	p {
		letter-spacing: 10px;
		font-weight: bold;
		// padding: 10px;
		margin-left: 0px;
		margin-right: 0px;
		text-align: center;
	}
}
.bg-purple {
    height: 100%;
    .right1 {
        width: 25%;
        height: 70px;
        float: left;
    }
    .right2 {
        width: 20%;
        float: left;
        span{
            align-content: center;
            line-height: 70px;
            margin-left: 0px;
            margin-right: 0px;
            font-size: 10px;
        }
        margin-left: 10px;
    }
    box-sizing: border-box;
  }
.protrait{
    margin-bottom: 0px;
}
</style>